<!DOCTYPE html>
<html>
<meta charset="UTF-8">

<head>
    <script>
        // DOM：文档对象模型（Document Object Model）
        /*
        * 参考：https://www.w3cschool.cn/javascript/js-htmldom.html
        *   JavaScript 能够改变页面中的所有 HTML 元素
        *   JavaScript 能够改变页面中的所有 HTML 属性
        *   JavaScript 能够改变页面中的所有 CSS 样式
        *   JavaScript 能够对页面中的所有事件做出反应
        * */
    </script>
</head>
<body>



<script>/*============================================ 改变内容 =================================================*/</script>
<p id="header">Old Header</p>

<script>
    element = document.getElementById("header");
    element.innerHTML="New Header";
</script>


<img id="image" src="http://pic.qiantucdn.com/58pic/13/74/51/99d58PIC6vm_1024.jpg!/fw/780/watermark/url/L3dhdGVybWFyay12MS4zLnBuZw==/align/center">

<script>
    document.getElementById("image").src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg";
</script>


<script>/*========================================== 改变样式 =======================================================*/</script>
<p id="p2">我是红色的！</p>
<script>
    document.getElementById("p2").style.color="red";
</script>


<script>/*=========================================== 改变内容 ===================================================*/</script>
<script>
    function changetext(id)
    {
        id.innerHTML="Ooops!";
    }
</script>
<p onclick="changetext(this)">Click on this text!</p>

<script>/*=========================================== 改变事件 =====================================================*/</script>
<button id="myBtn">点这里</button>
<script>
    document.getElementById("myBtn").onclick=function(){displayDate()};
    function displayDate(){
        document.getElementById("demo").innerHTML=Date();
    }
</script>

<script>/*===========================================================================================================*/</script>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
    function mOver(obj){
        obj.innerHTML="Thank You"
    }
    function mOut(obj){
        obj.innerHTML="Mouse Over Me"
    }
</script>


<script>/*====================================== event ================================================================*/</script>
<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn1">点我</button>
<p id="demo1"></p>
<script>
    // 执行2次add，那么两个函数都会执行！
    document.getElementById("myBtn1").addEventListener("click", displayDate);
    document.getElementById("myBtn1").addEventListener("click", someOtherFunction);
    function displayDate() {
        document.getElementById("demo1").innerHTML = Date();
    }
    function someOtherFunction() {
        alert ("函数已执行!")
    }
</script>


<script>/*====================================== 创建新元素 ===============================================================*/</script>

<div id="div1">
    <p id="p1">以下内容是动态生成的.</p>
    <p id="p3">此行被删掉了.</p>
</div>

<script>
    var para=document.createElement("p");
    var node=document.createTextNode("This is new. 此行是动态生成的！");
    para.appendChild(node);

    // 添加元素
    var element=document.getElementById("div1");
    element.appendChild(para);

    // 删掉已有元素
    var child=document.getElementById("p3");
    child.parentNode.removeChild(child);
</script>



</body>
</html>